/* eslint-disable no-unused-vars */
// import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import Logo from "../components/Logo";
import MyNavBar from "../components/nav-bar";
import { userLoginAPI } from "../services/auth";
import { setToken } from "../utils/tools";

function Login() {
  const navigate = useNavigate();

  const onFinish = async (v) => {
    const res = await userLoginAPI(v);
    console.log(res);
    if (res.success) {
      setToken(res.data);
      navigate("/user", { replace: true });
      Toast.show({ icon: "success", content: res.errorMessage });
    } else {
      Toast.show({ icon: "fail", content: res.errorMessage });
    }
  };

  return (
    <div>
      {/* 1. nav-bar */}
      <MyNavBar title="登录页面" />
      {/* 2. 头像 */}
      <Logo />
      <div>
        <Form
          onFinish={onFinish}
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <Form.Header>用户登录</Form.Header>
          <Form.Item
            label="用户名"
            name="userName"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input type="password" placeholder="请输入密码" />
          </Form.Item>
        </Form>
        <div
          style={{
            padding: "13px",
            display: "flex",
            justifyContent: "flex-end",
          }}
        >
          <Link to="/reg">没有账号，我要注册</Link>
        </div>
      </div>
    </div>
  );
}

export default Login;
